<template>
  <div class="">
    <el-drawer
      :title="firstRow && firstRow.id > 0 && !firstRow.child ? '编辑菜单权信息' : '添加菜单权限'"
      :visible.sync="drawerShow"
      :direction="direction"
      :before-close="handleClose"
      :wrapper-closable="false"
    >
      <el-divider />
      <div class="block">
        <x-l-form
          ref="xlform"
          :that="that"
          :edit-cfg="formCfg"
          :edit-data="formData"
          :edit-rules="formRule"
          @submitFunc="addPermission"
        >
          <template v-if="drawerShow" slot="parent">
            <treeSelect
              v-model="selValue"
              placeholder="请选择上级菜单权限"
              :searchable="true"
              :options="options"
              :limit="3"
              :max-height="200"
              @input="popoverHide"
            />
          </template>
        </x-l-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import api from '@/api'
import treeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import XLForm from '@/components/XLForm'

export default {
  components: {
    treeSelect,
    XLForm
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    firstRow: {
      type: Object,
      default: () => {
        return {}
      }
    },
    roleData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      that: this,
      drawerShow: false,
      direction: 'rtl',
      form: {},
      // define options
      options: [],
      selValue: 0,
      formCfg: [
        { label: '上级权限', prop: 'pid', type: 'slot', slot: 'parent' },
        { label: '权限名称', prop: 'name', type: 'input' },
        { label: '后端路由', prop: 'api_url', type: 'input' },
        { label: '前端路由', prop: 'url', type: 'input' },
        { label: '权限类型', prop: 'type', type: 'radio', radio: [{ label: '菜单', value: 1 }, { label: '按钮', value: 2 }] },
        { label: '启用权限控制', prop: 'status', type: 'switch' },
        { label: '排序', prop: 'sort', type: 'input' },
        { label: '备注', prop: 'description', type: 'textarea' }
      ],
      // 表单数据
      formData: {
        id: 0,
        pid: 0,
        name: null,
        type: 1,
        status: true,
        api_url: null,
        url: null,
        sort: 10,
        description: null
      },
      // 表单验证
      formRule: {
        pid: [{ required: true, message: '请选择上级权限', trigger: 'blur' }],
        name: [{ required: true, message: '请填写权限名称', trigger: 'blur' }]
      }
    }
  },
  inject: ['app'],
  provide() {
    return {
      parents: this
    }
  },
  watch: {
    show(val) {
      if (val === true) {
        this.getParentPermissions()
      }
      this.drawerShow = val
    },
    firstRow: {
      handler(json) {
        if (json && json.id > 0) {
          this.formData.id = json.id
          this.formData.name = json.name
          this.formData.api_url = json.api_url
          this.formData.url = json.url
          this.formData.type = json.type
          this.formData.status = json.status !== 2
          this.formData.description = json.description
          this.formData.sort = json.sort
        } else {
          this.formData.id = 0
          this.formData.name = null
          this.formData.api_url = null
          this.formData.url = null
          this.formData.type = 1
          this.formData.status = true
          this.formData.description = null
          this.formData.sort = 10
          this.formData.pid = 0
          this.selValue = 0
        }
        if (json && json.pid > 0) {
          this.formData.pid = json.pid
          this.selValue = json.pid
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getParentPermissions() {
      api.getParentPermissions().then(res => {
        this.options = res
        this.options.unshift({ label: '顶级', id: 0 })
      })
    },
    handleClose(done) {
      this.app.drawerShow = false
      this.formData.pid = 0
      this.$refs.xlform.clearValidate()
      if (done) {
        done()
      }
    },
    popoverHide(checkedId) {
      this.formData.pid = checkedId
      console.log(this.formData.pid)
    },
    // 提交操作
    addPermission() {
      this.formData.status = this.formData.status === true ? 1 : 2
      api.editPermission(this.formData).then(() => {
        this.$notify({
          title: '消息提示',
          type: 'success',
          message: '操作成功',
          duration: 2000
        })
        this.app.getList()
        this.app.drawerShow = false
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss">
.el-drawer__header span:focus {
  outline: 0;
}

.block {
  width: 90%;
  margin-top: 20px;
}

.el-drawer__header {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 1px;
}

.el-drawer.rtl {
  overflow: scroll;
}

.vue-treeselect {
  font-size: 13px;
}
</style>
